<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表单输入绑定</title>
  <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
  <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
  <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
</head>
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea：使用 value property 和 input 事件
  checkbox：使用 checked property 和 change 事件
  radio：使用 checked property 和 change 事件
  select：将 value 作为 prop 并将 change 作为事件

  修饰符：
    .lazy: 转为在 change 事件_之后_进行同步
    .number
    .trim: 自动过滤用户输入的首尾空白字符

  表单校验，使用 el-form-item 的 prop 属性来指定需要校验的字段，使用rules 属性来指定对应prop需要校验的规则
-->
<div id="demo">
  <el-form ref="myForm" :label-position="labelPosition" :rules="rules" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model.lazy="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="pwd">
      <el-input type="password" v-model.trim="form.pwd"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="爱好" prop="likes">
      <el-checkbox-group v-model="form.likes">
        <el-checkbox label="basket">篮球</el-checkbox>
        <el-checkbox label="foot">足球</el-checkbox>
        <el-checkbox label="pingpang">乒乓球</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="城市" prop="cityId">
      <el-select v-model="form.cityId">
        <el-option value="" disabled>未选择</el-option>
        <el-option :value="city.id" :label="city.name" v-for="(city, index) in allCitys" :key="city.id" :disabled="city.disabled">{{city.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="介绍" prop="info">
      <el-input type="textarea" rows="10" v-model="form.info"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit('myForm')">注册</el-button>
    <el-button @click="resetForm('myForm')">重置</el-button>
  </el-form>
</div>

<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS', disabled: true}, {id: 3, name: 'SZ'}],
      form: {
        username: '姓名',
        pwd: '密码123',
        sex: '男',
        likes: ['foot','pingpang'],
        cityId: 3,
        info: 'this is my info'
      },
      rules: {
        // 定义prop为username的表单选项的规则
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change'}
        ],
        sex: [{required: true, message: '请选择性别', trigger: 'change'}],
        likes: [{required: true, message: '请选择爱好', trigger: 'change'}],
        cityId: [{required: true, message: '请选择城市', trigger: 'change'}],
        info: [{required: true, message: '请输入介绍', trigger: 'blur'}]
      },
      labelPosition: "left", // 表单域标签的位置，可选值为 top、left、right
    },
    methods: {
      handleSubmit (formName) {
        // 判断表单是否验证通过
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form)
            alert('提交注册的ajax请求')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  })
</script>
</body>
</html>